<template>
  <div class="notification-components" v-if="filtersNotificationArray.length">
    <div class="notification-wrapper">
      <div class="notification-icon">
        <i class="iconfont">&#xe6a4;</i>
      </div>
      <div class="notification-badge" v-show="isBadge"></div>
      <div class="notification-list">
        <div ref="list-wrapper" :class="['list-wrapper', notificationComeBack ? '' : 'scroll-transition']">
          <div class="notification-item" v-for="( item, index ) in filtersNotificationArray" :key="index">
            <span class="txt"
                  @click="handleNotificationTableVisible">
              {{ item.message }}
            </span>
          </div>
        </div>
      </div>
    </div>
    <!-- </div> -->
    <el-dialog :visible.sync="notificationTableVisible" width="950px">
      <el-table :data="notification">
        <el-table-column property="created_at" width="200" label="通知时间"></el-table-column>X
        <el-table-column width="150" label="通知类型">
          <template slot-scope="scope">{{ scope.row.type === 1 ? '客流预警' : '一般通知' }}</template>
        </el-table-column>
        <el-table-column property="message" label="通知内容"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
import { Dialog, Table, TableColumn } from 'element-ui'
export default {
  name: 'title-components',
  props: {
    notification: {
      type: Array,
      default: function () {
        return []
      }
    },
    isBadge: {
      type: Boolean
    },
    isGoBackNav: {
      type: Boolean,
      default () {
        return false
      }
    }
  },

  components: {
    // elementUI component
    elDialog: Dialog,
    elTable: Table,
    elTableColumn: TableColumn
  },

  watch: {
    notification () {
      this.$nextTick(() => {
        if (this.timer !== undefined) {
          clearInterval(this.timer)
        }
        if (this.notification.length > 1) {
          this.timer = setInterval(this.notificationAutoScroll, this.time, this.$refs['list-wrapper'])
        }
      })
    }
  },

  destroyed () {
    clearInterval(this.timer)
  },

  data () {
    return {
      notificationComeBack: false,
      notificationTableVisible: false,
      time: 4000,
      initH: 0
    }
  },

  computed: {
    filtersNotificationArray () {
      let notification = this.notification.slice(0, 3)
      return (notification.length <= 1) ? notification : [...notification, notification[0]]
    }
  },

  methods: {
    notificationAutoScroll (dom) {
      this.initH++
      dom.style.transform = `translateY(${this.initH * -30}px)`
      if (this.initH === this.filtersNotificationArray.length - 1) {
        setTimeout(() => {
          this.initH = 0
          this.notificationComeBack = true
          dom.style.transform = 'translateY(0px)'
        }, 3000)
        setTimeout(() => {
          this.notificationComeBack = false
        }, 3500)
      }
    },
    handleNotificationTableVisible () {
      this.notificationTableVisible = true
      this.$emit('setNotificationsStatus')
    }
  }
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
  // scoped
  .notification-components {
    position: relative;
    padding: 10px 0;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    .notification-wrapper {
      position: absolute;
      left: 0;
      right: 0;
      top: 10px;
      box-sizing: border-box;
      padding-left: 30px !important;
      font-size: 14px;
      .notification-icon {
        position: absolute;
        top: -1px;
        left: 0;
        line-height: 30px;
      }
      .notification-badge {
        position: absolute;
        top: 5px;
        left: 15px;
        width: 6px;
        height: 6px;
        border-radius: 100%;
        background-color: red;
      }
      .notification-list {
        width: 100%;
        height: 30px;
        line-height: 30px;
        overflow: hidden;
        font-size: 12px;
        .list-wrapper {
          width: 100%;
          &.scroll-transition {
            transition: transform 1s ease;
          }
          .notification-item {
            text-overflow: ellipsis;
            .txt {
              cursor: pointer;
            }
          }
        }
      }
    }
  }
</style>
